import Vue from 'vue'
import VueRouter from "vue-router";
// Vite里面不能省略.vue
import Layout from '@/views/layout.vue'
import Detail from '@/views/article-detail.vue'
// 导入二级路由的四个组件
import Article from '@/views/article.vue'
import Collect from '@/views/collect.vue'
import Like from '@/views/like.vue'
import User from '@/views/user.vue'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    //   注意不要加./
    //    重定向
      {path:'/', redirect:'/article'},
      { 
        path:'/', 
        component:Layout,
        children:[
            // 二级路由，嵌套的内层，推荐省略外面的/
            { path:'article', component: Article},
            { path:'collect', component: Collect},
            { path:'like', component: Like},
            { path:'user', component: User},
        ]
     },
    //  另一个一级路由
    //  1. 配置动态路由
    //  2. 给article的每一个item绑定点击事件
    //  3. 进入了详情页，左上角还有一个返回按钮
     // 这个一级路由这里 / 不能省略
      { path:'/detail/:id', component:Detail }
    //   { path:'/detail', component:Detail }
  ]
})

export default router